<!doctype html>
<html>
<head>

  <title>observeReNodes</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer.html">

</head>
<body>

  <dom-module id='test-inner'>
    <template>
      ~<content></content>~
    </template>
    <script>
      Polymer({
        is:'test-inner',
        ready: function() {
          this.observe();
        },

        observe: function() {
          console.warn('observeNodes', this.localName);
          this._childObserver = Polymer.dom(this).observeNodes(function(info) {
            info.addedNodes.forEach(function(n) {
              if (n.nodeType === Node.ELEMENT_NODE) {
                console.log('added:', n.localName, n.textContent);
              }
            });
            info.removedNodes.forEach(function(n) {
              if (n.nodeType === Node.ELEMENT_NODE) {
                console.log('removed:', n.localName, n.textContent);
              }
            });
          });
        },

        unobserve: function() {
          console.warn('unobserveNodes', this.localName);
          Polymer.dom(this).unobserveNodes(this._childObserver);
        }
      });
    </script>
  </dom-module>

  <dom-module id='test-content'>
    <template>
      <test-inner id="inner">[<content id="ip"></content>]</test-inner>
    </template>
    <script>
    (function() {
      Polymer({
        is:'test-content'
      });
    })();
    </script>
  </dom-module>

  <test-content id="content">
    <div>content A</div>
    <div>content B</div>
  </test-content>

  <br><br>

  <script>
  
  function makeNode(text) {
    var d = document.createElement('div');
    d.textContent = text;;
    return d;
  }


  Polymer.dom.flush();

  function test() {
    console.group('test dynamic');
    var d = makeNode('dynamic!');
    Polymer.dom.flush();
    Polymer.dom(content).appendChild(d);
    Polymer.dom.flush();
    Polymer.dom(content).removeChild(d);
    Polymer.dom.flush();
    Polymer.dom(content).appendChild(makeNode('1'));
    Polymer.dom.flush();
    Polymer.dom(content.$.inner).appendChild(makeNode('2'));
    Polymer.dom.flush();
    Polymer.dom(content).insertBefore(makeNode('-1'), Polymer.dom(content).firstChild);
    Polymer.dom.flush();
    Polymer.dom(content.$.inner).insertBefore(makeNode('-2'), Polymer.dom(content.$.inner).firstChild);
    Polymer.dom.flush();
    Polymer.dom(content.$.inner).removeChild(Polymer.dom(content.$.inner).firstChild);
    Polymer.dom(content.$.inner).removeChild(Polymer.dom(content.$.inner).lastChild);
    Polymer.dom(content).removeChild(Polymer.dom(content).firstChild);
    Polymer.dom(content).removeChild(Polymer.dom(content).lastChild);
    Polymer.dom.flush();
    console.groupEnd('test dynamic');
  }
  test();
  content.$.inner.unobserve();
  test();
  content.$.inner.observe();
  test();
  content.$.inner.unobserve();
  test();
  content.$.inner.observe();
  test();
  

  </script>

</body>
</html>
